<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 动态组件   vueTAB栏切换-->
    多个组件使用同一个挂载点，并动态切换，这就是动态组件
    1.将两个切换显示的组件引入到app文件
    2.通过 component:{} 声明完毕后
    3.在html部分 书写: <component is='显示的组件自定义标签名'></component>标签
    4.在 is 中可以以变量形式进行控制展示不同的组件
    <component is='显示的组件自定义标签名'></component>




    <!-- 组件缓存 -->
    keep-alive
    Vue内置keep-alive组件, 把标签包起来的组件缓存起来,包括存在过的所有组件信息
    <keep-alive>
        <component :is="name"></component>
    </keep-alive>






    <!-- 插槽 -->
    vue提供组件插槽能力, 允许开发者在封装组件时，把不确定的部分定义为插槽
    即同一个组件生成不同的结构用以替换组件中的部分

    组件中被替换以:<slot></slot>为范围
    <slot>这里是被替换的部分,如果父级没有定义替换,则显示这个标签内的文字</slot>

    父级文件中,
    <组件自定义标签>中间写的内容就是用来替换此组件中 slot 中的结构内容</组件自定义标签>




    <!-- 多个插槽 具名插槽 -->
    当组件中有多个部分需要替换,则使用具名插槽
    在 slot 标签中设置 name 属性,用以父级中选中替换的部分
    <slot name="place1">默认显示1</slot>
    <slot name="place2">默认显示2</slot>

    父级中, 在标签内添加一个 <template></template> 标签,用以查询 slot name的 标识
    v-slot:place2 冒号后边的就是查询的 name 属性
    <组件自定义标签>
        <template v-slot:place2>
            这里写插入的结构
        </template>
    </组件自定义标签>





    <!-- 作用域插槽 -->
    将组件中的数据传递给父级,
    :接收的数据名='传递的数据'
    <slot :obj="obj">
        <p>{{obj.msg1}}</p>
        <p>{{obj.msg1}}</p>
    </slot>

    父级中,<template></template>标签中, v-slot='接收的数据名'
    <组件自定义标签>
        <template v-slot="getSon">
            <h3>{{getSon.obj.msg2}}</h3>
            <h3>{{getSon.obj.msg2}}</h3>
            <h3>{{getSon.obj.msg2}}</h3>
            <h3>{{getSon.obj.msg2}}</h3>
        </template>
    </组件自定义标签>








    <!-- 自定义指令 --> Vue.directive
    全局指令 在入口文件中书写,全局加上 v-bgc 就可以调用
    <!-- 背景颜色随机变 -->
    <script>
        Vue.directive("bgc", {
            inserted(el) {
                let a = () => Math.floor(Math.random() * 256);
                el.style.backgroundColor = `rgb(${a()},${a()},${a()})`;
                // 拓展：给dom注册事件 
            },
        });
    </script>


</body>

</html>